<template>
  <div id="root">
    <div><span></span></div>
    <el-row>
      <el-col :span="8">
        <div id="root-left">
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                   class="demo-ruleForm">

            <el-form-item label="我的部门" prop="position">
              <el-input type="text" v-model="part" autocomplete="off" disabled></el-input>

            </el-form-item>
            <el-form-item label="开始时间" prop="start">
              <el-date-picker
                v-model="ruleForm.start"
                type="datetime"
                placeholder="用车开始时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="end">
              <el-date-picker
                v-model="ruleForm.end"
                type="datetime"
                placeholder="用车结束时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="选择车辆" prop="car">
              <el-select v-model="ruleForm.car" placeholder="清选择车辆">
                <el-option :label="item.label" :value="item.value" v-for="item in options"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="前往地点" prop="position">
              <el-input type="text" v-model="ruleForm.position" autocomplete="off"></el-input>

            </el-form-item>
            <el-form-item label="用车描述" prop="desc">
              <el-input type="textarea" v-model="ruleForm.desc" autocomplete="off" :autosize="autosize"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>

        </div>
      </el-col>
      <el-col :span="15" :offset="1">
        <div style="text-align: left;margin-top: 40px;color: #8c939d"> 待审核的用车申请</div>
        <div id="root-right">
          <el-table
            height="400"
            :data="tableDatas"
            style="width: 100%">
            <el-table-column
              label="开始时间"
              width="100">
              <template slot-scope="scope">{{ scope.row.start|dataFMT('YYYY-MM-DD HH:mm:ss') }}</template>
            </el-table-column>
            <el-table-column
              label="结束时间"
              width="100">
              <template slot-scope="scope">{{ scope.row.end|dataFMT('YYYY-MM-DD HH:mm:ss') }}</template>
            </el-table-column>
            <el-table-column
              width="80"
              prop="hours"
              label="花费时长">
            </el-table-column>
            <el-table-column
              prop="position"
              label="目的地">
            </el-table-column>
            <el-table-column
              prop="desc"
              label="用车描述">
            </el-table-column>
            <el-table-column
              prop="car"
              width="105"
              label="车牌-座位">
            </el-table-column>
            <el-table-column
              prop="checker"
              label="审核人">
            </el-table-column>
          </el-table>

        </div>
        <div class="pagenation">
          <el-pagination
            small
            layout="prev, pager, next"
            :total="total"
            :page-size="page_size"
            @prev-click="prevfun"
            @next-click="nextfun"
            @current-change="currentchange"
          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: 'ApplyCarView',
    data () {
      var position = (rule, value, callback) => {
        if (!value || value === '') {
          return callback(new Error('前往地点不能为空'))
        }
        callback()
      }
      var start = (rule, value, callback) => {
        if (!value || value === '') {
          return callback(new Error('开始时间不能为空'))
        }
        callback()
      }
      var end = (rule, value, callback) => {
        if (!value || value === '') {
          return callback(new Error('结束时间不能为空'))
        }
        if (this.ruleForm.start > this.ruleForm.end) {
          return callback(new Error('结束日期应该晚于开始'))
        }

        callback()
      }
      var desc = (rule, value, callback) => {
        if (!value || value === '') {
          return callback(new Error('用车描述不能为空'))
        }
        callback()
      }
      return {
        total: 5, //所有数据个数
        page_size: 1,//每页数量
        tableDatas: [],//展示的用户的申请记录
        part: '',
        autosize: { minRows: 2 }, //多行输入框的高度
        checker: '',
        options: [],
        ruleForm: {},
        rules: {
          desc: [{
            validator: desc,
            trigger: 'blur'
          }],
          position: [

            {
              validator: position,
              trigger: 'blur'
            }
          ],
          start: [
            {
              validator: start,
              trigger: 'blur'
            }
          ],
          end: [
            {
              validator: end,
              trigger: 'blur'
            }
          ],
          car: [
            {
              required: true,
              message: '请选择申请的车辆类型',
              trigger: 'change'
            }
          ],
        }
      }
    },
    computed: {
      hours () {
        return this.ruleForm.end - this.ruleForm.start
      }
    },
    mounted () {
      this.get_car()
      this.part = sessionStorage.getItem('oapart')
      this.get_evection()
    },
    methods: {
      get_evection (page = 1) {
        this.$axios({
          url: this.$settings.base_url + `/user/applycar/?condition=${1}`,
          method: 'get'
        }).then(res => {
          this.tableDatas = res.data.results
          this.page_size = res.data.page_size
          this.total = res.data.count
        })
      },

      submitForm (formName) {
        var hours = 0
        hours = (this.ruleForm.end - this.ruleForm.start) / 1000 / 3600
        this.ruleForm.hours = hours
        console.log(this.ruleForm)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios({
              url: this.$settings.base_url + '/user/applycar/',
              method: 'post',
              data: this.ruleForm
            }).then(res => {

              if (res.data.code === 100) {
                this.$message.success('申请创建成功')
                this.resetForm('ruleForm')
                this.get_evection()
              } else {
                this.ruleForm.start = ''
                this.ruleForm.end = ''
                this.$message.error(res.data.error)
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },

      resetForm (formName) {
        this.$refs[formName].resetFields()
      },
      get_car () {
        this.$axios({
          url: this.$settings.base_url + '/user/createcar/?type=all',
          method: 'get',
        }).then(res => {
          if (res.data.code === 100) {
            this.options = res.data.data
            this.kui = res.data.data
          } else {
            this.$message.error('获取部门数据失败！！')
          }
        })
      },
      prevfun (value) {
        //value拿到的当前的页码,不用传递，内置的函数，自动传递要前往的页码
        this.get_evection(value)
      },
      nextfun (value) {
        //value拿到页码
        this.get_evection(value)
      },
      currentchange (value) {
        this.get_evection(value)

      },

    }

  }
</script>

<style scoped>
  #root-left {
    /*background-color: #409EFF;*/
    /*height: 300px;*/
    margin-top: 50px;
  }


</style>
